Signup at GitHub
Glitch signup/login
GitHub signup option
GitHub authentication process
Sentinel Hub Playground Interface
Download Image Option at Sentinel Hub Playground
Image Dimensions
Image Dimensions
Download Class 4 inclass data direct download HERE IF unable to generate 2 images via Sentinel Playground.
Next, we will resize the aspect ratio of each image by 50%. There are many online aspect calculators; we will use THIS ONE.
Enter the original dimensions of each image; then note and copy into a text document the 50% reduction width and height:
Original Dimensions
50% reduction | note the reduced width and height
Note: if using the Class 4 inclass data, the first image original dimensions are
1975 X 1102; reduction is987 x 551. The second image original dimensions are1975 X 1159; reduction is987 x 579.
assets
directory within the site.Note: this workflow can also be accomplished with our adopted code editor - VS Code. The advantage of Glitch is its ease-of-use; further, for this inclass demonstration lab, a website structure and it’s HTML is conveniently ‘out-of-the-box’, ready for us to revise and use.
Hello Website option and enact that
instance:Chose Hello Website
index.html page and
the assets directory:Access site structure
Assets directory and upload both
original satellite images:Upload Image Assets
Copy URL and
place into a text document:Copy image URL
URL of each recorded,
navigate to the index.html page in the director tree to the
left:Access index.html
index.html find the
<body> and </body> tag section:Body section within index.html
index.html: <img src="https://cdn.glitch.com/"
/>
Image Search Position
Replace the existing image URL with the first
satellite image URL. Then copy in the second satellite image utilizing
the same img src tag structure, but replacing the first
image URL with the second image URL. Once
complete, preview the work live via Share >
Live Site web address.
Next, we will alter the img src tag structure for
both images so as to decrease the image size by the 50% aspect ratio
reduction. This will give us better sized images for the site. The
format is simply width and height declarations, separated by 1 space,
both set within the img src opening and closing
tags.
<img src="https://cdn.glitch.com/"
width="" height=""
/>
Addition of width and height modifications
Within the same index.html page, modify existing
HTML elements, remove some HTML elements and add in a couple new
elements.
Utilize the following HTML GUIDE to inform your modifications.
iframe element. The basic code structure is as
follows. Like img src, further modifications can be made
within the element tags: <iframe src="https://www.example.com" title="text for title"></iframe>
Publish section and
copy the embed code:Secure CARTO embed code for 1 map
index.html under
your satellite images within the body section. Live preview
your map insertion into the web project to ensure your
embed addition is working as expected.